<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo</title>
  <script type="text/javascript" src="../vue.js"></script>
</head>

<body>
  <div id="app">
    <div>
      <Student v-bind="{name:'罗飞',age:20,sex:'男',count:10}" />
    </div>
    <div>
      <Student v-bind="{name:'王远',age:22,sex:'男' ,count:9}" />
    </div>
  </div>
</body>
<script type="text/javascript">
  // 调用 Vue.extend 返回一个VueComponent构造函数,每次返回的都是独立的 在组件标签中Vue帮你new调用了 实例化对象 
  const Student = Vue.extend({
    template: `<div>
      <h1>大爷我的名字叫:{{name}}!!!!!!</h1>
      <p>爷的贵庚是:{{age}}</p>
      <p>性别别问了:{{sex}}</p>
      <p>{{num}}</p>
      <button @click='num++'>+</button>
      <button @click='getThis'>点击获取this</button>
    </div>`,
    data() {
      return {
        num: this.count
      }
    },
    // props属性
    props: {
      name: {
        type: String
      },
      age: {
        type: Number
      },
      sex: {
        type: String
      },
      count: {
        type: Number
      }
    },
    methods: {
      getThis() {
        console.log(this, 'this');
      }
    }
  })
  // 阻止提示或者是警告
  Vue.config.productionTip = false
  const vm = new Vue({
    el: "#app",
    // 注册组件
    components: { Student }
  })
</script>

</html>